<template>
  <div class="member-page">
    <div class="page-header">
      <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
      <div class="page-title">人员信息</div>
    </div>
    <div class="page-body">
      <div class="table-search">
        <el-form inline>
          <el-form-item label="党员姓名">
            <el-input v-model="queryParams.partyMemberName" size="mini" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="党内职务">
            <el-input v-model="queryParams.partyPositionsName" size="mini" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="search">搜索</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form inline>
          <el-form-item>
            <el-button size="mini" type="primary" @click="openAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          height="100%"
        >
          <el-table-column type="index" label="序号" align="center" width="50" />
          <el-table-column prop="partyMemberName" label="党员姓名" align="center" width="120" />
          <el-table-column prop="partyOrgName" label="所属党组织" align="center" min-width="250" />
          <el-table-column prop="partyPositionsName" label="党内职务" align="center" width="150" />
          <el-table-column prop="approveAppointmentTime" label="批准任职时间" align="center" width="150" />
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="openEdit(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                size="mini"
                style="color:#F56C6C;"
                @click="openDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getData"
      />
    </div>
    <addOrEditMember ref="addOrEditMember" @getData="getData" />
  </div>
</template>
<script>
import { queryMemberList, deleteMemberById } from '@/api/partyMemberManagement/teamBuilding'
import addOrEditMember from './addOrEditMember.vue'
export default {
  components: {
    addOrEditMember
},
  data () {
    return {
      tableData: [],
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        teamBuildingId: '',
        partyMemberName: '',
        partyPositionsName: ''
      }
    }
  },
  methods: {
    init (id) {
      this.queryParams.teamBuildingId = id
      this.search()
    },
    getData () {
      queryMemberList(this.queryParams).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
      })
    },
    openAdd () {
      this.$refs.addOrEditMember.open({})
    },
    openEdit (row) {
      this.$refs.addOrEditMember.open(row)
    },
    openDelete (row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMemberById({ id: row.id }).then((res) => {
          this.$message.success('删除成功')
          this.getData()
        })
      })
    },
    search () {
      this.queryParams.pageNo = 1
      this.getData()
    },
    reset () {
      this.queryParams.partyMemberName = ''
      this.queryParams.partyPositionsName = ''
      this.search()
    },
    goback () {
      this.$emit('goback')
    }
  }
}
</script>
<style scoped lang="scss">
  .page-header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .back-button {
      margin-right: 16px;
    }
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .page-body {
    padding-top:16px;
    .table-search {
      display: flex;
      justify-content: space-between;
    }
    .table-box {
      height: calc(100vh - 280px);
    }
  }
</style>
